import React, {Component} from 'react';
import SelectButton from '../../../../component/SelectButton';
import style from './css/Labels.css';

class Labels extends Component {
	
	render() {
		let {labels, selectedLabelIdMap, onSelected, onLongPress} = this.props;
		let labelNodes = [];
		if(labels && labels.length > 0) {
			for(let label of labels) {
				let {labelId, labelName} = label;
				let selected = selectedLabelIdMap[label.labelId] ? true : false;
				labelNodes.push(
					<SelectButton 
					key={labelId} 
					selected={selected}
					onMouseDown={() => {
						this.isClick = true;
						this.timer = setTimeout(() => {
							this.isClick = false;
							onLongPress && onLongPress(labelId, selected);
						}, 600);
					}} 
					onMouseUp={() => {
						if(this.isClick) {
							onSelected && onSelected(labelId, selected);
							if(this.timer) {
								clearTimeout(this.timer);
								this.timer = undefined;
							}
						}
					}} >
						{labelName}
					</SelectButton>
				);
			}
		} else {
			labelNodes = <span className={style.noLabel}>还没有标签  →_→</span>;
		}
		return (
			<div className='labelsContainer'>
				{labelNodes}
			</div>
		);
	}
	
}

export default Labels;